
{% assign router = section.router | default : routes.current_route  %}
{% if section.settings.is_index_board and router == "index/index" and section.settings.is_board %}
{% assign showBoard = true %}
{% elsif section.settings.is_index_board == false and section.settings.is_board %}
{% assign showBoard = true %}
{% else %}
{% assign showBoard = false %}
{% endif %}
{% get_currencies limit=100 %}
{% get_nav nav_id={section.settings.nav.id} %}
{% assign header_nav = nav %}
<style>

#header_box {
  position: relative;
  background-color: var(--nav-bg);
  color: var(--menu-color);
}
#header_box a {
  color: var(--menu-color);
}

.top_bar {
  display: block;
  /* line-height: 3;
    color: #fff;
    background: #383838; */
  /* text-align: center; */
  text-align: center;
  line-height: 20px;
  padding: 10px 0;
  /* border-bottom: 1px solid #eeeeee; */
}

#header_box .header_wrapper {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
}

#header_box .header_icon {
  display: flex;
  display: -webkit-flex;
  flex:1;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end; 
}

#header_box .header_icon > a {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 30px;
  position: relative;
}
#header_box svg path{
  fill: var(--menu-color);
}
#header_box .logo{
  font-size: var(--title_font_size);
}
@media screen and (max-width: 767px) {
  font-size: calc(var(--title_font_size) * var(--wap_title_scale))
}
#header_box .header_icon a.cart_icon span {
  min-width: 20px;
  height: 20px;
  background: #F00B0B;
  display: none;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  position: absolute;
  top: 50%;
  right: -10px;
  margin-top: -20px;
}

#header_box .nav {
  width: auto;
  flex: 1;
}

#header_box .nav > ul {
  display: flex;
  flex-wrap: wrap;
  display: -webkit-flex;
  justify-content: end;

}

#header_box .nav li {
  padding: 0 20px;
  display: block;
  list-style-type: none;
}

#header_box .nav li .nav-li-a {
  display: block;
  font-weight: 400;
  letter-spacing: var(--nav_letter_spacing);
  {%- comment -%} font-size: 16px; {%- endcomment -%}
  display: flex;
  align-items: center;
}

#header_box .nav li .nav-li-a a {
  color: var(--menu-color);
}

#header_box .nav li .nav-li-a svg {
  margin-left: 5px;
}

#header_box .pop_search {
  position: absolute;
  left: 0;
  bottom: -124px;
  height: 124px;
  width: 100%;
  background: #f4f4f4;
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  transition: all 0.3s;
}

#header_box .pop_search form {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#header_box .pop_search .search_txt {
  height: 44px;
  border: 0;
  width: calc(100% - 140px);
  text-indent: 10px;
  background: none;
  box-sizing: border-box;
  font-size: 16px;
  border: 1px solid var(--main_button_bg);
}

#header_box .pop_search .search_btn {
  width: 140px;
  height: 44px;
  line-height: 44px;
  border: 0;
  background: var(--main_button_bg);
  margin: 0;
  color: var(--main_button_color);
  text-align: center;
  cursor: pointer;
}

#header_box .pop_search_on {
  opacity: 1;
  visibility: visible;
}

#header_box .pop_search_on .pop_search_wrapper {
  height: 90px;
  padding: 0 20px;
}

#header_box .mobile_menu_icon {
  display: none;
}

#header_box .currency_box {
  height: 80px;
  position: relative;
  z-index: 999;
  margin-left: 30px;
}

#header_box .currency_txt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--menu-color);
  letter-spacing: var(--nav_letter_spacing);
  font-size: 16px;
  height: 80px;
  line-height: 80px;
  cursor: pointer;
}
#header_box .currency_txt span {
  display: flex;
  align-items: center;
  gap: 8px;
}

#header_box .drop_currency a {
  color: var(--menu-color);
  letter-spacing: var(--nav_letter_spacing);
  font-size: 14px;
}

#header_box .currency_txt svg {
  width: 14px;
  fill: #333;
  margin-left: 5px;
}

#header_box .drop_currency {
  position: absolute;
  top: 80px;
  left: 0;
  padding: 10px;
  max-width: 240px;
  max-height: 60vh;
  overflow-y: auto;
  box-sizing: border-box;
  background: var(--nav-bg);
  border: 1px solid var(--nav-bg);
  -webkit-transition: transform .2s ease-in-out;
  -moz-transition: transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
  -webkit-transform: scale3d(1, 0, 1);
  transform: scale3d(1, 0, 1);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

#header_box .drop_currency_on .drop_currency {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}

#header_box .currency_txt svg {
  -webkit-transition: transform .2s ease-in-out;
  -moz-transition: transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
}

#header_box .drop_currency_on .currency_txt svg {
  transform: rotate(-180deg);
}

#header_box .drop_currency li {
  list-style-type: none;
}

.header_box_default .drop_currency a {
  display: flex;
  align-items: center;
  padding: 4px 10px;
  gap: 6px;
  margin: 0;
}
#header_box .drop_currency a span {
  display: flex;
  align-items: center;
}

#header_box .drop_currency a:hover {
 opacity: .7;
}

.mobile_menu {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.mobile_menu .mobile_mask {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.mobile_menu .mobile_menu_wrapper {
  background: var(--nav-bg);
  width: 70%;
  height: 100vh;
  overflow-y: auto;
  transform: translate(-100%, 0);
  transition: all 0.3s;
  position: relative;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  max-width: 450px;
  z-index: 10;
}

.mobile_menu .mobile_menu_top {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  height: 50px;
  border-bottom: 1px solid #ddd;
}

.mobile_menu .mobile_nav {
  /* padding: 15px 0; */
}

.mobile_menu .mobile_nav li a {
  /* line-height: 3; */
  padding: 0 18px;
  height: 64px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.mobile_menu .mobile_nav li > .avtive {
  background-color: #e3e3e3;
}

.mobile_menu .mobile_nav li .child_mobile_nav {
  display: none;
}

.mobile_menu .mobile_currency {
  padding: 0 15px;
  margin-bottom: 12px;
}

.mobile_menu .mobile_currency .mobile_currency_text_wrap {
  position: relative;
}
.mobile_menu .mobile_currency .mobile_currency_text_wrap .mobile_currency_text svg {
  transition: all .2s ease;
}
.mobile_menu .mobile_currency .mobile_currency_text_wrap.open .mobile_currency_text svg{
  transform: rotate(180deg);
}
.mobile_menu .mobile_currency .mobile_currency_text_wrap.open .mobile_currency_list {
  display: block;
}
.mobile_menu .mobile_currency .mobile_currency_text_wrap .mobile_currency_list {
  position: absolute;
  width: 100%;
  padding: 6px;
  border: 1px solid var(--menu-color);
  border-radius: 2px;
  box-sizing: border-box;
  max-height: 150px;
  overflow-y: auto;
  background-color: var(--nav-bg);
  color: var(--menu-color);
  display: none;
}
.mobile_menu .mobile_currency .mobile_currency_text_wrap .mobile_currency_list[position=bottom] {
  top: calc(100% + 6px);
}
.mobile_menu .mobile_currency .mobile_currency_text_wrap .mobile_currency_list[position=top] {
  bottom: calc(100% + 6px);
}
.mobile_menu .mobile_currency .mobile_currency_text_wrap .mobile_currency_list .mobile_web-currency {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
}

.mobile_menu .mobile_currency .mobile_currency_text {
  height: 40px;
  width: 100%;
  border: 1px solid var(--menu-color);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  box-sizing: border-box;
}

.mobile_menu_on {
  opacity: 1;
  visibility: visible;
}

.mobile_menu_on .mobile_menu_wrapper {
  transform: none;
}

@media (max-width: 1200px) {
  #header_box .pop_search_wapper {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
    box-sizing: border-box;
  }
}

@media (max-width: 768px) {
  #header_box .pop_search_wapper {
    padding-left: 2rem;
    padding-right: 2rem;
    box-sizing: border-box;
  }
  /* #header_box .pop_search form{
        width: calc(100% - 50px);
    } */
  #header_box .mobile_menu_icon {
    display: flex;
  }
  #header_box .header_wapper {
    flex-wrap: nowrap;
  }

  #header_box .nav {
    display: none;
  }
  #header_box .header_icon > .saerch_icon, #header_box .header_icon > .account_icon {
    display: none;
  }
  /* #header_box .header_icon .saerch_icon{
        display: none;
    } */
  #header_box .header_icon a svg {
    width: 26px;
    height: 26px;
  }
  #header_box .mobile_menu_icon svg {
    width: 26px;
    height: 26px;
  }
  #header_box .pop_search_on .pop_search_wapper {
    height: 125px;
    padding: 0 15px;
  }
  #header_box .currency_box {
    display: none;
  }
  #header_box .header_icon > a {
    margin-left: 0;
  }
  
  #header_box .header_icon {
  flex: none;
}
}

@media (max-width: 767px) {
  .container_wapper {
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
  }
  #footer_box .footer_link {
    flex-wrap: wrap;
  }
  #footer_box .footer_link dl {
    width: 100%;
    margin-bottom: 30px;
    text-align: center;
  }
  #header_box .header_icon > a {
    margin-left: 0;
  }
}
#header_box .nav .nav-li .nav-li-a{
  position: relative;
}
#header_box .nav .nav-li{
  position: static;
}
#header_box .nav .nav-li:hover .nav-li-a::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background-color: var(--menu-color);
  content: "";
}

#header_box .nav .nav-li:hover .nav-child {
  display: block;
}

@media (max-width: 767px) {
  #header_box .saerch_icon,
  #header_box .account_icon {
    display: none;
  }

.mobile_menu-clear {
  left: calc(70% + 30px) !important;
  z-index: 10;
}
}

.nav-box {
  position: relative;
}

.nav-child {
  /* display: flex; */
  display: none;
  position: absolute;
  left: 0;
  padding: 80px 0;
  background-color: var(--nav-bg);
  /* justify-content: center; */
  /* visibility: hidden; */
  min-width: 100vw;
  z-index: 1000;
}

.nav-child ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 50px;
}

.nav-child li {
  margin: 0 20px;
}

.nav-child dt {
  font-size: 14px;
  line-height: 18px;
  color: var(--menu-color);
  margin-bottom: 30px;
}

.nav-child dd a {
  font-size: 14px;
  line-height: 18px;
  color: var(--menu-color);
  font-weight: 300;
  opacity: 0.6;
}

.nav-child dd + dd {
  margin-top: 30px;
}

.mobile_nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile_nav-item svg {
  cursor: pointer;
  padding: 12px 18px;
  transition: transform .25s;
}

.mobile_nav-item-open svg {
  transform: rotate(180deg);
}

.search-mobile-box {
  padding: 12px;
  display: flex;
  align-items: center;
}

.search-mobile-icon {
  margin-right: 13px;
}

.search-mobile-input {
  flex: 1;
  height: 46px;
  font-size: 14px;
  line-height: 36px;
}

.button-claer {
  background-color: transparent;
  padding: 0;
}

.mobile_menu-clear {
  position: absolute;
  top: 28px;
  left: 500px;
}
.logo-pc-img{
  max-width:400px
}
.logo-wap-img{
  max-width:200px;
  display:none;
}

@media (max-width: 767px) {
  .logo-pc-img{
    display:none;
  }
  .logo-wap-img{
    display:block;
  }
}


.headerNavItemA .headerNavItemImg {
  display: inline-flex !important;
}
.default-header-menu {
  align-items: center;
}
.mobile_nav .headerNavItemImg {
  display: inline-flex !important;
}
.default-header-menu .more-menu {
  height: 100%;
}

/* */

@media screen and (max-width: 768px) {
#app_googletranslate-wrap-static {
  padding: 20px 18px 20px 9px !important;
}
}



</style>
{%- if section.settings.is_fixed == true -%}
  <style>
  #header_box {
    background-color: var(--nav-bg);
    color: var(--menu-color);
    position: relative;
    z-index: 99999;
}

#header_box.is_fixed {
      position: fixed;
      box-shadow: 0 2px 5px #0000000f;;
      top: 0;
      left: 0;
      width: 100%;
      transform: translateY(-100%);
}

#header_box.is_fixed.anime {
    transform: translateY(0);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

  </style>
  
{%- endif -%}

<div class="page_container">
    <div id="header_box" class="header_box header_box_default  {% if section.settings.is_fixed == true %} control-all-header-fixed {% endif %} " style="--nav-bg:{{ section.settings.nav_bg }};--menu-color: {{ section.settings.menu_color }}">
      {% if showBoard %}
        <div class="plugin-container-tabbar_fix top_bar" style="background-color:{{ section.settings.board_bg }};">
          <div class="justify-self-start"></div>
          <a class=" justify-self-center inline_center" href="{{ section.settings.board_link.url }}" style="color: {{ section.settings.board_font }};" >{{ section.settings.board_text }}</a>
          <div class="plugin-container-tabbar justify-self-end " style="color: {{ section.settings.board_font }};font-size:12px"></div>
        </div>
      {% endif %}
     <div class="nav-box">
     
      <div class="header_wrapper container_wrapper">
        <a class="mobile_menu_icon" href="javascript:void(0);">
          <svg t="1637129868590" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3968" width="32" height="32">
            <path d="M0 160m32 0l768 0q32 0 32 32l0 0q0 32-32 32l-768 0q-32 0-32-32l0 0q0-32 32-32Z" fill="{{section.settings.icon_color}}" p-id="3969"></path>
            <path d="M0 480m32 0l768 0q32 0 32 32l0 0q0 32-32 32l-768 0q-32 0-32-32l0 0q0-32 32-32Z" fill="{{section.settings.icon_color}}" p-id="3970"></path>
            <path d="M0 800m32 0l768 0q32 0 32 32l0 0q0 32-32 32l-768 0q-32 0-32-32l0 0q0-32 32-32Z" fill="{{section.settings.icon_color}}" p-id="3971"></path>
          </svg>
        </a>

        
        <div class="def_header_logo logo">
          {% include 'logo', settings:section.settings %}
        </div>

        
  
        
  
        <div class="header_icon">
          <div class="nav" style="--menu-color:{{section.settings.menu_color}}">
          <ul class="default-header-menu">
          
            {% if section.settings.nav.id != "" %}
            {% for item in header_nav.nav_item %}
            <li class="nav-li">
            <div class="nav-li-a" >
            <a 
             style="color:{{item.setting_json.color}};font-style:{{item.setting_json.style}};font-weight:{{item.setting_json.bold}};text-decoration:{{item.setting_json.decoration}};" 
            target="{{item.setting_json.open | default : '_self' }}"
            {% if item.setting_json and  item.setting_json.model != 1 %}rel="external nofollow"{% endif %}
             href="{{item.url_json.url | default:'javascript:void(0)' }}">
              {% if item.src %}
                  <header-nav-img>
                      {% include 'lazy_img',src: item.src,alt: '' %}
                      {{item.nav_item_name}}
                  </header-nav-img>
              {% else %}
              {{item.nav_item_name}}
              {% endif %}
            </a>
            {% if item.children %}
            <svg t="1636003081626" style="margin-top: -2px;" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2399" width="10" height="10"><path d="M65.582671 288.791335l446.417329 446.41733 446.417329-446.41733z" fill="{{section.settings.menu_color}}" p-id="2400"></path></svg>
            {% endif %}
            </div>
            {% if item.children %}
            <div class="nav-child default">
              <ul>
                {% for el in item.children %}
                <li>
                  <dl>
                      <dt>
                        <a 
                        style="color:{{el.setting_json.color}};font-style:{{el.setting_json.style}};font-weight:{{el.setting_json.bold}};text-decoration:{{el.setting_json.decoration}};" 
                        target="{{el.setting_json.open | default : '_self' }}"
                        {% if el.setting_json and el.setting_json.model != 1 %}rel="external nofollow"{% endif %}
                        href="{{el.url_json.url | default:'javascript:void(0)' }}">
                          {% if el.src %}
                              <header-nav-img>
                                  {% include 'lazy_img',src: el.src,alt: '' %}
                                  {{el.nav_item_name}}
                              </header-nav-img>
                          {% else %}
                          {{el.nav_item_name}}
                          {% endif %}
                        </a>
                      </dt>
                    {% for ddItem in el.children %}
                    <dd>
                     <a 
                      style="color:{{ddItem.setting_json.color}};font-style:{{ddItem.setting_json.style}};font-weight:{{ddItem.setting_json.bold}};text-decoration:{{ddItem.setting_json.decoration}};" 
                      target="{{ddItem.setting_json.open | default : '_self' }}"
                      {% if ddItem.setting_json and ddItem.setting_json.model != 1 %}rel="external nofollow"{% endif %}
                      href="{{ddItem.url_json.url | default:'javascript:void(0)' }}">
                        {% if ddItem.src %}
                            <header-nav-img>
                                {% include 'lazy_img',src: ddItem.src,alt: '' %}
                                {{ddItem.nav_item_name}}
                            </header-nav-img>
                        {% else %}
                        {{ddItem.nav_item_name}}
                        {% endif %}
                      </a>
                    </dd>
                    {% endfor %}
                    
                  </dl>
                </li>
                {% endfor %}
                
              </ul>
            </div>
            {% endif %}
            </li>
            {% endfor %}
            <li class="nav-li more-menu hidden"><div class="nav-li-a"><a class="nav-li-a " href="javascript:;" >{{lang.general.more_link}}</a></div></li>
            {% else %}
            <li class="nav-li"><a class="nav-li-a" href="/" >Home</a></li>
            {% endif %}
          
          </ul>
          </div>

          {% if section.settings.is_currency %}
          <div class="currency_box" style="--menu-color:{{section.settings.menu_color}}">
            <div class="currency_txt notranslate" id="currencyBox">
              {% if section.settings.is_currency_flag %}
                <span style="display:flex;gap: 6px;">
                 
                   {% include 'flag',code: currency.standard_code  %}
                  {{ currency.standard_code }}
                </span>
              {% else %}
                {{ currency.standard_code }}
              {% endif %}
              <svg t="1636003081626" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2399" width="10" height="10"><path d="M65.582671 288.791335l446.417329 446.41733 446.417329-446.41733z" fill="{{section.settings.menu_color}}" p-id="2400"></path></svg>
            </div>
            <div class="drop_currency" id="currencyCon">
              <ul class="currency">
                {% if section.settings.is_currency_flag %}
                  {% for list in currencies %}
                    
                    <li>
                      <a href="javascript:void(0);" class="web-currency notranslate" data-type="{{ list.standard_code }}" rel="nofollow">
                        <span style="padding: 3px 0;">{% include 'flag',code: list.standard_code  %}</span><span>{{ list.standard_code }}</span><span>{{ list.symbol_left }}{{ list.symbol_right }}</span>
                      </a>
                    </li>
                  {% endfor %}
                {% else %}
                  {% for list in currencies %}
                    <li>
                      <a href="javascript:void(0);" class="web-currency notranslate" data-type="{{ list.standard_code }}" rel="nofollow">
                        <span>{{ list.standard_code }}</span><span>{{ list.symbol_left }}{{ list.symbol_right }}</span>
                      </a>
                    </li>
                  {% endfor %}
                {% endif %}
                
  
              </ul>
            </div>
            <script>
              console.log({{ currencies | json }})
              $("#currencyBox").click(function (e) {
                e.stopPropagation();
                if ($('.currency_box').hasClass('drop_currency_on')) {
                  $('.currency_box').removeClass('drop_currency_on');  
                } else {
                   $('.pop_search').removeClass('pop_search_on');
                  $('.currency_box').addClass('drop_currency_on');
                }
              });
              $('.drop_currency').click(function (e) {
                e.stopPropagation();
              });
              $(document).click(function () {
                $('.currency_box').removeClass('drop_currency_on');
              });
            </script>
          </div>
          {% endif %}
          {% if section.settings.is_search %}
          <a class="saerch_icon control-all-search" href="javascript:void(0);">
              <svg t="1637129710453" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3527" width="22" height="22">
                <path fill="{{section.settings.icon_color}}" d="M747.52 696.32l133.12 133.12c15.36 15.36 15.36 35.84 0 51.2-15.36 15.36-35.84 15.36-51.2 0l-133.12-133.12c-158.72 133.12-399.36 107.52-527.36-51.2s-107.52-399.36 51.2-527.36 399.36-107.52 527.36 51.2c117.76 138.24 117.76 337.92 0 476.16zM460.8 158.72C291.84 158.72 158.72 291.84 158.72 460.8s133.12 302.08 302.08 302.08c168.96 0 302.08-133.12 302.08-302.08 0-168.96-133.12-302.08-302.08-302.08z" p-id="3528"></path>
              </svg>
            </a>
          {% endif %}
  
          {% if section.settings.is_member %}
          <a class="account_icon" href="/account/login">
            <svg t="1637129772556" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3684" width="22" height="22">
              <path fill="{{section.settings.icon_color}}"
                d="M870.4 916.48v-10.24c-15.36-133.12-107.52-250.88-230.4-307.2 122.88-81.92 153.6-250.88 71.68-373.76C629.76 102.4 460.8 71.68 337.92 153.6s-153.6 250.88-71.68 373.76c20.48 25.6 40.96 51.2 71.68 71.68-128 51.2-215.04 168.96-235.52 302.08V916.48c0 20.48 15.36 40.96 40.96 40.96 20.48 0 35.84-15.36 35.84-35.84 20.48-148.48 143.36-266.24 291.84-276.48h30.72c148.48 10.24 271.36 122.88 291.84 271.36 0 20.48 15.36 35.84 35.84 40.96 25.6-5.12 40.96-20.48 40.96-40.96zM291.84 373.76c0-107.52 87.04-194.56 194.56-194.56 107.52 0 194.56 87.04 199.68 194.56-5.12 102.4-81.92 184.32-184.32 194.56h-30.72c-102.4-10.24-179.2-92.16-179.2-194.56z"
                 p-id="3685"></path>
            </svg>
          </a>
          {% endif %}

          <a class="cart_icon" {% if page_ca != 'cart_list' %} id="cart_icon" {% endif %} href="javascript:void(0);">
            <svg t="1637129817677" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3811" width="22" height="22">
              <path fill="{{section.settings.icon_color}}"
                d="M415.904 830.56a64 64 0 1 0 64 64 64 64 0 0 0-64-64z m447.168 0a64 64 0 1 0 64 64 64 64 0 0 0-64-64z m63.36-32h-518.72a94.656 94.656 0 0 1-92.128-82.88L261.408 334.368l-30.816-178.24a32.608 32.608 0 0 0-29.952-28.256H159.904a32 32 0 1 1 0-64h40.704a95.296 95.296 0 0 1 93.184 82.88l30.752 177.536 54.4 382.976a31.328 31.328 0 0 0 28.8 27.296h518.752a32 32 0 1 1 0 64z m-478.816-127.712a32 32 0 0 1-2.336-63.776l433.312-32a32 32 0 0 0 31.072-26.784l50.24-287.808a39.616 39.616 0 0 0-8.096-29.76 19.776 19.776 0 0 0-15.328-7.04h-552.96a32 32 0 1 1 0-64h552.992a83.2 83.2 0 0 1 63.136 28.544 103.488 103.488 0 0 1 23.488 81.472l-50.336 288a94.272 94.272 0 0 1-91.904 81.184l-430.944 32h-2.368z m0 0"
                p-id="3812"></path>
            </svg>
            <span id="cart_number"></span></a>
        </div>
  
      </div>
    </div>
  
      <div class="pop_search">
        <div class="container_wrapper">
          <form action="/search" class="control-all-search" onsubmit="return search('.search_txt')">
            <input class="search_txt"  type="text" name="q" placeholder="{{ section.settings.search_placeholder }}">
            <button class="search_btn" type="submit">{{ lang.general.searchword }}</button>
          </form>
        </div>
      </div>
      <div class="mobile_menu"  style="--menu-color:{{section.settings.menu_color}}">
        <svg t="1631538204213" class="mobile_menu-clear" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1295" width="20" height="20">
          <path
            d="M571.01312 523.776l311.3472-311.35232c15.7184-15.71328 15.7184-41.6256 0-57.344l-1.69472-1.69984c-15.7184-15.71328-41.6256-15.71328-57.34912 0l-311.3472 311.77728-311.35232-311.77728c-15.7184-15.71328-41.63072-15.71328-57.344 0l-1.69984 1.69984a40.0128 40.0128 0 0 0 0 57.344L452.92544 523.776l-311.35232 311.35744c-15.71328 15.71328-15.71328 41.63072 0 57.33888l1.69984 1.69984c15.71328 15.7184 41.6256 15.7184 57.344 0l311.35232-311.35232 311.3472 311.35232c15.72352 15.7184 41.63072 15.7184 57.34912 0l1.69472-1.69984c15.7184-15.70816 15.7184-41.6256 0-57.33888l-311.3472-311.35744z"
            p-id="1296" fill="#FFFFFF"></path>
        </svg>
        <div class="mobile_menu_wrapper">
          {% if section.settings.is_search %}
          <form action="/search" onsubmit="return search('.search-mobile-input')" class="search-mobile-box control-all-search">
            <button type="submit" class="button-claer"> 
            <svg class="search-mobile-icon" style="vertical-align: top;" t="1637129710453" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3527" width="20" height="20">
              <path fill="{{section.settings.icon_color}}" d="M747.52 696.32l133.12 133.12c15.36 15.36 15.36 35.84 0 51.2-15.36 15.36-35.84 15.36-51.2 0l-133.12-133.12c-158.72 133.12-399.36 107.52-527.36-51.2s-107.52-399.36 51.2-527.36 399.36-107.52 527.36 51.2c117.76 138.24 117.76 337.92 0 476.16zM460.8 158.72C291.84 158.72 158.72 291.84 158.72 460.8s133.12 302.08 302.08 302.08c168.96 0 302.08-133.12 302.08-302.08 0-168.96-133.12-302.08-302.08-302.08z" p-id="3528"></path>
            </svg>
          </button>
            <input class="search-mobile-input" style="background: transparent;" type="text" placeholder="{{ section.settings.search_placeholder }}" />
          </form>
          {% endif %}
          <div class="mobile_nav">
            <ul>
              {% if section.settings.nav.id %}

              {% for item in header_nav.nav_item %}
              <li>
                <div   class="mobile_nav-item">
                  <a 
                    style="color:{{item.setting_json.color}};font-style:{{item.setting_json.style}};font-weight:{{item.setting_json.bold}};text-decoration:{{item.setting_json.decoration}};" 
                  target="{{item.setting_json.open | default : '_self' }}"
                  {% if item.setting_json and item.setting_json.model != 1 %}rel="external nofollow"{% endif %}
                    href="{{item.url_json.url | default:'javascript:void(0)' }}">
                    {% if item.src %}
                        <header-nav-img>
                            {% include 'lazy_img',src: item.src,alt: '' %}
                            {{item.nav_item_name}}
                        </header-nav-img>
                    {% else %}
                    {{item.nav_item_name}}
                    {% endif %}
                  </a>
                  {% if item.children %}
                  <svg t="1636003081626" style="margin-top: -2px;" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2399" width="14" height="14"><path d="M65.582671 288.791335l446.417329 446.41733 446.417329-446.41733z" fill="#b1b1b1" p-id="2400"></path></svg>
                  {% endif %}

                </div>
                {% if item.children %}
                <ul class="child_mobile_nav">
                {% for el in item.children %}
                  <li>
                    <div  class="mobile_nav-item">
                      <a 
                      style="color:{{el.setting_json.color}};font-style:{{el.setting_json.style}};font-weight:{{el.setting_json.bold}};text-decoration:{{el.setting_json.decoration}};" 
                      target="{{el.setting_json.open | default : '_self' }}"
                      {% if el.setting_json and el.setting_json.model != 1 %}rel="external nofollow"{% endif %}
                      href="{{el.url_json.url | default:'javascript:void(0)' }}">
                        {% if el.src %}
                            <header-nav-img>
                                {% include 'lazy_img',src: el.src,alt: '' %}
                                {{el.nav_item_name}}
                            </header-nav-img>
                        {% else %}
                        {{el.nav_item_name}}
                        {% endif %}
                      </a>
                      {% if el.children %}
                      <svg t="1636003081626" style="margin-top: -2px;" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2399" width="14" height="14"><path d="M65.582671 288.791335l446.417329 446.41733 446.417329-446.41733z" fill="#b1b1b1" p-id="2400"></path></svg>
                      {% endif %}
                    </div>
                    <ul class="child_mobile_nav">
                    {% for ddItem in el.children %}
                    <li style="padding:0 16px">
                      <a 
                      style="color:{{ddItem.setting_json.color}};font-style:{{ddItem.setting_json.style}};font-weight:{{ddItem.setting_json.bold}};text-decoration:{{ddItem.setting_json.decoration}};" 
                      target="{{ddItem.setting_json.open | default : '_self' }}"
                      {% if ddItem.setting_json and ddItem.setting_json.model != 1 %}rel="external nofollow"{% endif %}
                      href="{{ddItem.url_json.url | default:'javascript:void(0)' }}">
                        {% if ddItem.src %}
                            <header-nav-img>
                                {% include 'lazy_img',src: ddItem.src,alt: '' %}
                                {{ddItem.nav_item_name}}
                            </header-nav-img>
                        {% else %}
                        {{ddItem.nav_item_name}}
                        {% endif %}
                  </a>
                    </li>
                    {% endfor %}
                    </ul>

                  </li>

                {% endfor %}
                </ul>
                {% endif %}
                
              </li>
              {% endfor %}
              {% else %}
               <li>
                <a href="/">Home</a>
              </li>
              {% endif %}
              
              {% if section.settings.is_member %}
              {% if customerInfo and customerInfo.email %}
              <li>
                <a href="/account">{{ lang.layout.customer.account }}</a>
              </li>
              {% else %}
              <li>
                <a href="/account/login">{{ lang.layout.customer.login }}</a>
              </li>
              <li>
                <a href="/account/register">{{ lang.layout.customer.create }}</a>
              </li>
              {% endif %}
              {% endif %}
              <div class="plugin-container-tabbar isMobile"></div>
            </ul>
          </div>
          {% if section.settings.is_currency %}
          <div class="mobile_currency">
            <div class="mobile_currency_text_wrap">
              <div class="mobile_currency_text">
                <span style="display:flex;gap: 6px;align-items: center;">
                  {% if section.settings.is_currency_flag %}
                   
                     {% include 'flag',code: currency.standard_code  %}
                  {% endif %}
                  {{ currency.standard_code }}
                </span>
                <svg t="1703043480379" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6378" width="10" height="10"><path fill="{{ section.settings.menu_color }}" d="M134.380308 259.308308l388.804923 387.623384 387.623384-387.544615 111.458462 111.379692-498.845539 498.845539L23.158154 370.845538z" p-id="6379"></path></svg>
              </div>
              <ul class="mobile_currency_list" position="top">
                {% if section.settings.is_currency_flag %}
                  {% for list in currencies %}
                    
                    <li>
                      <div class="mobile_web-currency" data-type="{{ list.standard_code }}">
                        <span>{% include 'flag',code: list.standard_code  %}</span><span>{{ list.standard_code }}</span>:<span>{{ list.symbol_left }}{{ list.symbol_right }}</span>
                      </div>
                    </li>
                  {% endfor %}
                {% else %}
                  {% for list in currencies %}
                    <li>
                      <div class="mobile_web-currency" data-type="{{ list.standard_code }}" rel="nofollow">
                        <span>{{ list.standard_code }}</span>:<span>{{ list.symbol_left }}{{ list.symbol_right }}</span>
                      </div>
                    </li>
                  {% endfor %}
                {% endif %}
              </ul>
            </div>
          </div>
          {% endif %}

        </div>
        <div class="mobile_mask"></div>
      </div>
    </div>

 
</div>

<script type="text/javascript">
      moi.setHeadMenu({
        parent:".default-header-menu",
        child:".nav-li",
        moreClass:".more-menu",
        logoSrc:"{{section.settings.logo_pic.src|public_front_asset_url}}",
        onMore:function(){
          $('.mobile_menu').addClass('mobile_menu_on')
        }
      })
	$(function(){
    $('.mobile_nav-item').click(function(){
      $(this).siblings(".child_mobile_nav").slideToggle()
      if($(this).hasClass('mobile_nav-item-open')){
        $(this).removeClass('mobile_nav-item-open')
      }else{
        $(this).addClass('mobile_nav-item-open')
      }
		})

    $('.mobile_currency_text').on('click',function(e) {
      e.stopPropagation();
      $(this).parent().addClass('open')
    })
    $('.mobile_currency_list').on('click',function(e) {
      e.stopPropagation();
    })
    $(".web-currency").click(function(){
      currencyPath($(this).data("type"))
    })
    $(".mobile_web-currency").click(function(){
      currencyPath($(this).data("type"))
    })
    
    $('.mobile_menu .mobile_mask').on('click',function(e) {
      e.stopPropagation();
      $('.mobile_currency_text_wrap').removeClass('open');
    })

   
    

    function currencyPath(val){
      const currency = moi.getUrlParam('currency');
      if(currency || location.href.indexOf('theme_id') > -1){
        location.href = moi.changeURLArg(location.href,"currency",val)
      }
      else{
        location.href = moi.addURLParam(location.href,"currency",val)
      }
    }
    
   
    
		$('.saerch_icon').click(function(e){
                e.stopPropagation();

      if($('.pop_search').hasClass('pop_search_on')){
        $('.pop_search').removeClass('pop_search_on');
      }else{
        $('.pop_search').addClass('pop_search_on');
      }
			
		})

    $('.pop_search').click(function (e) {
                e.stopPropagation();
              });

    $(document).click(function () {
      if($('.pop_search').hasClass('pop_search_on')){
        $('.pop_search').removeClass('pop_search_on');
      }
      $('.mobile_currency_text_wrap').removeClass('open')
    });
		
		$('.mobile_menu_icon').click(function(){
      if($('.mobile_menu').hasClass("mobile_menu_on")){
			$('.mobile_menu').removeClass('mobile_menu_on')

        return 
      }
			$('.mobile_menu').addClass('mobile_menu_on')
		})
		$('.mobile_menu_close,.mobile_menu>.mobile_mask').click(function(){
			$('.mobile_menu').removeClass('mobile_menu_on')
		})

    $('.mobile_menu-clear').click(function(){
			$('.mobile_menu').removeClass('mobile_menu_on')
		})


		$('#cart_icon').click(function(){
      window.showMiniCart();
		})
    $('.minicart .close_btn').click(function(){
			$('.minicart').removeClass('minicart_on');
		})
		$('.minicart').click(function(){
			$('.minicart').removeClass('minicart_on');
		})
		$('.minicart_wrapper').click(function(e){
			e.stopPropagation();
		})
		addCartNum();



	})
</script>

{%- if section.settings.is_fixed == true -%}

  <script>
  
  $(function() {
  let headerId = '#header_box'
  let Timer = null
  let headerOffsetTop,height
  
  $(window).on('scroll',function() {
    headerOffsetTop = document.querySelector(headerId).offsetTop;
    height = document.querySelector(headerId).clientHeight;

    
    let offsetTop = headerOffsetTop + height
    let scrollTop = $(window).scrollTop()
    if(scrollTop > offsetTop) {
      $('#search_popup .search_wrap').css('top', `0px`);
      $(headerId).addClass('is_fixed')
        $(headerId).css('top', 0) 
      clearTimeout(Timer)
      Timer = setTimeout(() => {
        $(headerId).addClass('anime')
      },5)
    }else {
      $('#search_popup .search_wrap').css('top', `${headerOffsetTop}px`);
      $(headerId).removeClass('is_fixed')
      $(headerId).css('top', 0) 

      $('.header_box_zw').addClass('hidden')
      clearTimeout(Timer)
      Timer = setTimeout(() => {
        $(headerId).removeClass('anime')
      },5)
    }
  })

  $('#header_box .search_icon svg').on('click',function() {
    $('#search_popup').addClass('open')
    $('html').addClass('htmlScrollNone')
  })

  })
</script>
  
{%- endif -%}



{% schema %}
{
	"tag": "",
	"class": "header",
	"is_global": true,
	"name": {
		"zh_CN": "头部",
		"en_US": "Header"
	},
	"max_blocks": "0",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "菜单导航设置",
				"en_US": "Menu Navigation Settings"
			}
		},
		{
			"type": "card_nav",
			"label": {
				"zh_CN": "选择菜单",
				"en_US": "Select menu"
			},
			"default": {
				"id": "",
				"title": ""
			},
			"id": "nav"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "公告栏",
				"en_US": "Bulletin board"
			}
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "开启公告栏",
				"en_US": "Turn on the bulletin board"
			},
			"id": "is_board",
			"default": true
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "仅首页显示公告栏",
				"en_US": "Display bulletin board only on home page"
			},
			"id": "is_index_board"
		},
    {
	"type": "card_switch",
	"label": {
		"zh_CN": "固定导航栏",
		"en_US": "Fixed navigation bar"
	},
	"default": false,
	"id": "is_fixed"
},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "公告栏文案",
				"en_US": "Bulletin board copy"
			},
			"id": "board_text",
			"default": "We Free Shipping Worldwide."
		},
		{
			"type": "card_page_link",
			"label": {
				"zh_CN": "公告栏链接",
				"en_US": "Bulletin board link"
			},
			"default": {
				"type": "",
				"title": "",
				"url": ""
			},
			"id": "board_link"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "顶部LOGO与图片",
				"en_US": "Top LOGO and image"
			}
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "pc端logo图片",
				"en_US": "Logo image on PC"
			},
			"id": "pc_logo_pic",
			"default": ""
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "pc端logo图片宽度",
				"en_US": "Logo image width on PC"
			},
			"id": "pc_logo_w",
			"max": "400",
			"unit": "px",
			"min": "0",
			"default": 60
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "移动端logo图片",
				"en_US": "Mobile logo image"
			},
			"id": "wap_logo_pic",
			"default": ""
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "移动端logo图片宽度",
				"en_US": "Mobile logo image width"
			},
			"id": "wap_logo_w",
			"max": "200",
			"unit": "px",
			"min": "0",
			"default": 60
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "个人中心",
				"en_US": "Personal center"
			},
			"id": "is_member",
			"default": "1"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "搜索",
				"en_US": "Search"
			},
			"id": "is_search",
			"default": "1"
		},
    {
			"type": "card_switch",
			"label": {
				"zh_CN": "货币切换",
				"en_US": "Currency switch"
			},
			"id": "is_currency",
			"default": "1"
		},
    {
			"type": "card_switch",
			"label": {
				"zh_CN": "货币前展示国旗",
				"en_US": "Display the national flag in front of the currency"
			},
			"id": "is_currency_flag",
			"default": "1"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "搜索底纹",
				"en_US": "Search shading"
			},
			"id": "search_placeholder",
			"default": "Search"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "颜色设置",
				"en_US": "Color Settings"
			}
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "公告栏字体",
				"en_US": "Bulletin board font"
			},
			"id": "board_font",
			"default": "#333"
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "公告栏背景",
				"en_US": "Bulletin board background"
			},
			"id": "board_bg",
			"default": "#fff"
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "导航栏背景",
				"en_US": "Navigation bar background"
			},
			"id": "nav_bg",
			"default": "#fff"
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "菜单项字体",
				"en_US": "Menu item font"
			},
			"id": "menu_color",
			"default": "#1d1f21"
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"nav": {
				"id": "",
				"title": ""
			},
			"is_board": true,
			"is_index_board": false,
			"board_text": "We Free Shipping Worldwide.",
			"board_link": {
				"type": 0,
				"title": "",
				"url": "",
				"source_id": ""
			},
			"pc_logo_pic": {
				"src": "",
				"alt": ""
			},
			"pc_logo_w": 60,
			"wap_logo_pic": {
				"src": "",
				"alt": ""
			},
			"wap_logo_w": 60,
			"is_fixed": false,
			"is_member": true,
			"is_search": true,
			"is_currency": true,
      "is_currency_flag": false,
			"board_font": "#1E1B1B",
			"board_bg": "#EAEAEA",
			"nav_bg": "#fff",
			"search_placeholder": "Search",
			"menu_color": "#1d1f21",
			"logo_pic": {
				"src": "",
				"alt": ""
			}
		},
		"blocks": [],
		"type": "header"
	}
}
{% endschema %}